<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <caption>商品列表</caption>
    <tr>
        <th>商品标题</th>
        <th>商品价格</th>
        <th>商品销量</th>
    </tr>
</table>

<script>
    let p1={};
    p1.name="张三";
    p1.age=18;
    p1.run=function () {
        console.log(this.name+":"+this.age);
    }
    p1.run();
    let p2={
        name:"关羽",
        age:20,
        run:function () {
            console.log(this.name+":"+this.age);
        }
    }
    p2.run();
    //将多个信息封装到一个对象中
    let arr =  [{title:"小米手机",price:5000,saleCount:200},
        {title:"李宁篮球鞋",price:500,saleCount:100},
        {title:"华为电视",price:4000,saleCount:20},
        {title:"苹果14pro max",price:10000,saleCount:2}]
    let table = document.querySelector("table");
    //遍历
    for (let product of arr){
        let tr = document.createElement("tr");
        let titleTd = document.createElement("td");
        let priceTd = document.createElement("td");
        let saleCountTd = document.createElement("td");
        titleTd.innerText = product.title;
        priceTd.innerText = product.price;
        saleCountTd.innerText = product.saleCount;
        tr.append(titleTd,priceTd,saleCountTd);
        table.append(tr);
    }
</script>
</body>
</html>